<template xmlns:el-col="http://www.w3.org/1999/html">
  <el-container style="padding: 24px; background-color: rgb(245, 247, 249)">
    <el-tabs v-model="activeName" @tab-click="tabClick" style="width: 100%">
      <el-tab-pane label="锅炉故障分布分析" name="first">
        <el-header style="height: 20px;text-align: left;">
          <h2>锅炉故障分布分析</h2>
        </el-header>
        <el-main>
          <el-row
            type="flex"
            class="row-bg"
            justify="space-between"
            style="margin-bottom: 24px"
          >
            <el-col :span="12">
              <div class="grid-content">
                <MapChart
                  ref="chinamap"
                  :id="'chinamap'"
                  :chartTitle="'故障率区域分布'"
                  :chartData="mapData"
                  :type="'map'">
                </MapChart>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="grid-content">
                <MapChart
                  :chartTitle="'故障类型分布'"
                  ref="scatter1"
                  :id="'scatter1'"
                  :chartData="scatterData"
                  :type="'scatter'"
                >
                </MapChart>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="center">
            <el-col :span="24">
              <div class="grid-content">
                <MapChart ref="line1"  :chartTitle="'故障率劣化趋势'" :id="'line1'" :chartData="lineData1" :type="'line'" :xAxis="xAxis">
                </MapChart>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-tab-pane>
      <el-tab-pane label="锅炉能耗效率分析" name="second">
        <el-header style="height: 20px;text-align: left;">
          <h2>锅炉能耗效率分析</h2>
        </el-header>
        <el-main>

          <el-row
            type="flex"
            class="row-bg"
            justify="space-between"
            style="margin-bottom: 24px"
          >
            <el-col :span="24">
              <el-card style="height: 70px">
                <div class="grid-content" style="text-align: left;">
                    <el-select v-model="select.value1" v-on:change="selectChange" placeholder="请选择" style="margin-bottom: 24px;">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                    <el-select v-model="select.value2" placeholder="请选择" style="margin-bottom: 24px;">
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>

                  <el-button type="primary" v-on:click="search">查询</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row
            type="flex"
            class="row-bg"
            justify="space-between"
            style="margin-bottom: 24px"
          >
            <el-col :span="24">
                <div class="grid-content">
                    <MapChart ref="line2" :id="'line2'" :chartTitle="'锅炉能耗效率年度历史趋势分析'" :chartData="lineData2" :type="'line'">
                    </MapChart>
                </div>
            </el-col>
          </el-row>
          <el-row type="flex"
            class="row-bg"
            justify="space-between"
            style="margin-bottom: 24px">
            <el-col :span="6">
                <div class="gri-content">
                    <OtherChart ref="pie" :id="'pie'" :chartTitle="'设备能耗年度频次占比'"  :chartData="pieData" :type="'pie'"></OtherChart>
                </div>
            </el-col>
             <el-col :span="17">
                <div class="gri-content">
                    <OtherChart ref="bar" :id="'bar'":chartTitle="'锅炉效率TOP5年度数据'"  :chartData="barData" :type="'bar'"></OtherChart>
                </div>
            </el-col>
          </el-row>
        </el-main>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>
<script>
import { getMapData, getAnalysisLineData,getAnalysisLineData2 } from "../../api/bigDataAnalysis";

import MapChart from "../../components/analysis/MapChart";
import OtherChart from "../../components/analysis/OtherChart";

export default {
  name: "BigData",
  components: { MapChart, OtherChart },
  data() {
    return {
      activeName: "first",
      legend: [],
      xAxis: [],
      // ***** 地图数据相关
      mapData: [],
      // ***** 散点图数据相关
      scatterData: [],
      // 折线数据
      lineData1: [],
      lineData2: [],
      // 下拉框选项
      options1: [
        {
          value: "1",
          label: "万凯三期",
        }
      ],
      options2: [
        {
          value: "1",
          label: "1号锅炉",
        },
        {
          value: "2",
          label: "2号锅炉",
        },
        {
          value: "3",
          label: "3号锅炉",
        },
      ],
      options3: [
        {
          value: "1",
          label: "锅炉1",
        },
        {
          value: "2",
          label: "锅炉2",
        },
        {
          value: "3",
          label: "锅炉3",
        },
      ],
      select: {
        value1: "1",
        value2: "2",
        value3: "3",
      },
      // 饼图数据
      pieData: [],
      barData: []
    };
  },
  watch: {},
  filters: {},
  mounted() {
      this.getData();
    },
  methods: {
    getData() {
        // 包括获取 地图 折线 散点图等之类的数据
        getMapData({}).then(res => {
            if (res) {
                this.mapData = res;
            }
        });
        getAnalysisLineData({}).then(res => {
            if (res) {
                let legend = [];
                let xAxis = [];
                let seriesData = [];
                for (let i = 0; i < res.length; i++) {
                    legend.push(res[i].name);
                    let tmp = {
                        name: res[i].name,
                        type: 'line',
                        data: []
                    }
                    for (let j = 0; j < res[i].valueList.length; j++) {
                        if (i == 0) {
                            xAxis.push(res[i].valueList[j].xAxis);
                        }
                        tmp.data.push(res[i].valueList[j].value);
                    }
                    seriesData.push(tmp);
                }
                this.xAxis = xAxis;
                this.legend = legend;
                this.lineData1 = seriesData;
            }
        });
        // getScatterData({}).then(res => {
        //
        // });

      getAnalysisLineData2({}).then(res => {
        if (res) {
          let legend = [];
          let xAxis = [];
          let seriesData = [];
          for (let i = 0; i < res.length; i++) {
            legend.push(res[i].name);
            let tmp = {
              name: res[i].name,
              type: 'line',
              data: []
            }
            for (let j = 0; j < res[i].valueList.length; j++) {
              if (i == 0) {
                xAxis.push(res[i].valueList[j].xAxis);
              }
              tmp.data.push(res[i].valueList[j].value);
            }
            seriesData.push(tmp);
          }
          this.xAxis = xAxis;
          this.legend = legend;
          this.lineData2 = seriesData;
        }
      });
    },
    getOtherData() {
        // 获取锅炉能耗效率分析 数据
      getAnalysisLineData2({}).then(res => {
            if (res) {
                let legend = [];
                let xAxis = [];
                let seriesData = [];
                for (let i = 0; i < res.length; i++) {
                    legend.push(res[i].name);
                    let tmp = {
                        name: res[i].name,
                        type: 'line',
                        data: []
                    }
                    for (let j = 0; j < res[i].valueList.length; j++) {
                        if (i == 0) {
                            xAxis.push(res[i].valueList[j].xAxis);
                        }
                        tmp.data.push(res[i].valueList[j].value);
                    }
                    seriesData.push(tmp);
                }
                this.xAxis = xAxis;
                this.legend = legend;
                this.lineData2 = seriesData;
            }
        });
    },
    // 标签栏切换
    tabClick(tab, event) {
      this.$nextTick(() => {
          if (tab.name == 'first') {
              this.$refs.chinamap.resize();
              this.$refs.scatter1.resize();
              this.$refs.line1.resize();
          } else if (tab.name == 'second') {
              this.$refs.line2.resize();
              this.$refs.pie.resize();
              this.$refs.bar.resize();
          }
      })
    },
    selectChange(event) {
    },
    // 根据下拉选获取数据
    search() {
        let params = this.select;
        // 根据参数从新获取数据
        this.getOtherData();
    }
  },
};
</script>
